<template>
  <div>
    <div class="home-product" data-v-2833728a="">
      <div
        class="home-panel"
        data-v-39dda62a=""
        data-v-2833728a=""
        v-for="(item, index) in arr"
        :key="index"
      >
        <div class="container" data-v-39dda62a="">
          <div class="head" data-v-39dda62a="">
            <h3 data-v-39dda62a="">
              {{ item.name }}<small data-v-39dda62a=""></small>
            </h3>
            <div
              class="sub"
              data-v-2833728a=""
              v-for="(item, index) in item.children"
              :key="index"
            >
              <a href="#" class="" data-v-2833728a="">{{ item.name }}</a>
            </div>
            <a href="#" class="xtx-more" data-v-d6f2c104="" data-v-2833728a=""
              ><span data-v-d6f2c104="">查看全部</span
              ><i class="iconfont icon-angle-right" data-v-d6f2c104=""></i
            ></a>
          </div>
          <div class="box" data-v-2833728a="">
            <a href="#" class="cover" data-v-2833728a=""
              ><img alt="" data-v-2833728a="" :src="item.picture" /><strong
                class="label"
                data-v-2833728a=""
                ><span data-v-2833728a="">{{item.name}}馆</span
                ><span data-v-2833728a="">{{ item.saleInfo }}</span></strong
              ></a
            >
            <ul class="goods-list" data-v-2833728a="">
              <li
                data-v-2833728a=""
                v-for="(item, index) in item.goods"
                :key="index"
              >
                <div class="goods-item" data-v-88714542="" data-v-2833728a="">
                  <a href="#" class="image" data-v-88714542=""
                    ><img alt="" data-v-88714542="" :src="item.picture"
                  /></a>
                  <p class="name ellipsis-2" data-v-88714542="">
                    {{ item.name }}
                  </p>
                  <p class="desc ellipsis" data-v-88714542="">
                    {{ item.desc }}
                  </p>
                  <p class="price" data-v-88714542="">¥{{ item.price }}</p>
                  <div class="extra" data-v-88714542="">
                    <a
                      aria-current="page"
                      href="#"
                      class="router-link-active router-link-exact-active"
                      data-v-88714542=""
                      ><span data-v-88714542="">找相似</span
                      ><span data-v-88714542="">发现现多宝贝 &gt;</span></a
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    this.axios
      .get("https://apipc-xiaotuxian-front.itheima.net/home/goods")
      .then((res) => {
        this.arr = res.data.result;
      });
  },
};
</script>